<!--
 * @Author: your name
 * @Date: 2021-04-01 21:37:31
 * @LastEditTime: 2021-05-06 16:33:07
 * @LastEditors: Please set LastEditors
 * @Description: 下载 分享和收藏
 * @FilePath: /medicine-web/src/components/UserOptions/index.vue
-->
<template>
  <div class="user-options-container">
    <img v-show="item.isDownload === true" style="width: 28px; height: 28px; cursor:pointer;" :src="require('@/assets/image/download_active.png')" alt="" @click.stop="download(item)">
    <img v-show="item.isDownload === false" style="width: 28px; height: 28px; cursor:pointer;"  :src="require('@/assets/image/download_deactive.png')" alt="" @click.stop="download(item)">
    <a-popover v-model="item.isShare" trigger="click">
      <a slot="content" class="share-icon-list">
        <img style="width: 18px; height: 18px; cursor:pointer;" :src="require('@/assets/image/xinlang.png')" alt="" @click.stop="showXinLang(item)">
        <img style="width: 18px; height: 18px; margin-left: 16px; cursor:pointer;" :src="require('@/assets/image/qq.png')" alt="" @click.stop="showQQ(item)">
        <!-- <img style="width: 18px; height: 18px; margin-left: 16px; cursor:pointer;" :src="require('@/assets/image/weibo.png')" alt="" @click.stop="showWeibo(item)"> -->
        <img style="width: 20px; height: 20px; margin-left: 16px; cursor:pointer;" :src="require('@/assets/image/wechat.png')" alt="" @click.stop="showWechat(item)">
      </a>
      <img v-show="item.isShare === false" style="width: 24px; height: 24px; margin-left: 20px; cursor:pointer;" :src="require('@/assets/image/share.png')" alt="" @click.stop="share(item)">
      <img v-show="item.isShare === true" style="width: 24px; height: 24px; margin-left: 20px; cursor:pointer;" :src="require('@/assets/image/share_active.png')" alt="" @click.stop="share(item)">
    </a-popover>
    <img v-show="item.isCollect === false" style="width: 24px; height: 24px; margin-left: 20px; cursor:pointer;" :src="require('@/assets/image/collection.png')" alt="" @click.stop="collection(item)">
    <img v-show="item.isCollect === true" style="width: 24px; height: 24px; margin-left: 20px; cursor:pointer;" :src="require('@/assets/image/collection_active.png')" alt="" @click.stop="collection(item)">
    <div class="wechat-qr-code__container" v-if="showQRCode">
      <div class="wechat-qr-code__title">手机微信扫码分享</div>
      <img class="wechat-qr-code__close" :src="require('@/assets/image/close.png')" alt="" @click.stop="showQRCode = false">
      <div id="wechat-qr-code"></div>
    </div>
    <div class="wechat-qr-code__modal" v-if="showQRCode" @click.stop="showQRCode = false"></div>
  </div>
</template>
<script>
export default {
  name: 'userOptions',
  data () {
    return {
      showQRCode: false
    }
  },
  methods: {
    download (item) {
      item.isDownload = !item.isDownload
      if (item.isDownload) {
        this.$emit('handleClick', { type: 'download', data: item })
      }
    },
    share (item) {
      item.isShare = !item.isShare
      if (item.isShare) {
        this.$emit('handleClick', { type: 'share', data: item })
      }
    },
    collection (item) {
      item.isCollect = !item.isCollect
      this.$emit('handleClick', { type: 'collection', data: item, active: item.isCollect })
    },
    showQQ (item) {
      item.isShare = false
      this.$emit('handleClick', { type: 'qq', data: item })
    },
    showWeibo (item) {
      item.isShare = false
      this.$emit('handleClick', { type: 'weibo', data: item })
    },
    showXinLang (item) {
      item.isShare = false
      this.$emit('handleClick', { type: 'xinlang', data: item })
    },
    showWechat (item) {
      item.isShare = false
      this.showQRCode = true
      this.$emit('handleClick', { type: 'wechat', data: item })
    },
  },
  props: {
    item: {
      type: Object,
      default: () => {}
    }
  }
}
</script>
<style lang="scss" scoped>
.wechat-qr-code__container {
  position: fixed;
  width: 280px;
  height: 340px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 20;
  background-color: #fff;
  padding: 40px;
  border-radius: 3px;
  box-sizing: 0px 0px 3px rgba(0, 0, 0, 0.2);
  .wechat-qr-code__title {
    text-align: center;
    margin-bottom: 20px;
  }
  .wechat-qr-code__close {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 24px;
    height: 24px;
    cursor: pointer;
  }
  .wechat-qr-code__close:hover {
    opacity: 0.7;
  }
}
.wechat-qr-code__modal {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 19;
  background-color: rgba(0, 0, 0, 0.2);
}
</style>